<form nz-form id="irInfoDetail" [formGroup]="validateForm" (ngSubmit)="submitForm()"
	style="padding: 0.2rem; border-bottom: 1px solid rgb(232, 232, 232)"
	onkeypress="if(event.keyCode===13||event.which===13){return false;}">
	<div nz-row nzGutter="16">
		<div nz-col class="gutter-row" nzSpan="6">
			<nz-form-item nz-col nzSpan="24" style="width:100%">
				<nz-form-label nz-col nzSpan="12">{{'TrafficManagement.IncidentRecord.Incident_Id' | translate}}
				</nz-form-label>
				<nz-form-control nz-col nzSpan="12">
					<input nz-input formControlName="ir_ID" />
				</nz-form-control>
			</nz-form-item>
		</div>
		<div nz-col class="gutter-row" nz-col nzSpan="6">
			<nz-form-item nz-col nzSpan="24" style="width:100%">
				<nz-form-label nz-col nzSpan="12">
					{{'TrafficManagement.IncidentRecord.Verification_Status' | translate}}</nz-form-label>
				<nz-form-control nz-col nzSpan="12">
					<nz-select formControlName="veri_State">
						<nz-option *ngFor="let option of verificationStatus" [nzValue]="option.value"
							[nzLabel]="option.name"></nz-option>
					</nz-select>
				</nz-form-control>
			</nz-form-item>
		</div>
		<div nz-col class="gutter-row" nzSpan="6">
			<nz-form-item nz-col nzSpan="24" style="width:100%">
				<nz-form-label nz-col nzSpan="12">{{'TrafficManagement.IncidentRecord.Cause_Ir_Id' | translate}}
				</nz-form-label>
				<nz-form-control nz-col nzSpan="12">
					<input nz-input formControlName="cause_IR_ID" />
				</nz-form-control>
			</nz-form-item>
		</div>
		<div nz-col class="gutter-row" nzSpan="6">
			<nz-form-item nz-col nzSpan="24" style="width:100%">
				<nz-form-label nz-col nzRequired nzSpan="13">{{'TrafficManagement.IncidentRecord.Source' | translate}}
				</nz-form-label>
				<nz-form-control nz-col nzSpan="11">
					<nz-select formControlName="source">
						<nz-option *ngFor="let option of sourceType" [nzValue]="option.value" [nzLabel]="option.name">
						</nz-option>
					</nz-select>
				</nz-form-control>
			</nz-form-item>
		</div>
	</div>
	<div nz-row nzGutter="16">
		<div nz-col class="gutter-row" nzSpan="6">
			<nz-form-item nz-col nzSpan="24" style="width:100%">
				<nz-form-label nz-col nzRequired nzSpan="12">
					{{'TrafficManagement.IncidentRecord.Incident_Type' | translate}}</nz-form-label>
				<nz-form-control nz-col nzSpan="12">
					<nz-select formControlName="type" (ngModelChange)='changeIncidentType($event)'>
						<nz-option *ngFor="let option of incidentType" [nzValue]="option.value" [nzLabel]="option.name">
						</nz-option>
					</nz-select>
				</nz-form-control>
			</nz-form-item>
		</div>
		<div nz-col class="gutter-row" nzSpan="6">
			<nz-form-item nz-col nzSpan="24" style="width:100%">
				<nz-form-label nz-col nzRequired nzSpan="12">{{'TrafficManagement.IncidentRecord.Zone_ID' | translate}}
				</nz-form-label>
				<nz-form-control nz-col nzSpan="12">
					<input nz-input formControlName="zone_ID" />
				</nz-form-control>
			</nz-form-item>
		</div>
		<div nz-col class="gutter-row" nzSpan="6">
			<nz-form-item nz-col nzSpan="24" style="width:100%">
				<nz-form-label nzRequired nz-col nzSpan="12">{{'TrafficManagement.IncidentRecord.Cause' | translate}}
				</nz-form-label>
				<nz-form-control nz-col nzSpan="12">
					<!-- <input nz-input formControlName="cause" /> -->
					<nz-select formControlName="cause">
						<nz-option [nzValue]="item.value" [nzLabel]="item.name"
							*ngFor="let item of causeList"></nz-option>
					</nz-select>
				</nz-form-control>
			</nz-form-item>
		</div>
	</div>
	<div nz-row nzGutter="16">
		<div nz-col class="gutter-row" nzSpan="6">
			<nz-form-item nz-col nzSpan="24" style="width:100%">
				<nz-form-label nz-col nzRequired nzSpan="12">
					{{'TrafficManagement.IncidentRecord.Road_Name' | translate}}</nz-form-label>
				<nz-form-control nz-col nzSpan="12">
					<input nz-input formControlName="road_Name" />
				</nz-form-control>
			</nz-form-item>
		</div>
		<div nz-col class="gutter-row" nzSpan="6">
			<nz-form-item nz-col nzSpan="24" style="width:100%">
				<nz-form-label nz-col nzRequired nzSpan="12">
					{{'TrafficManagement.IncidentRecord.Location_Type' | translate}}</nz-form-label>
				<nz-form-control nz-col nzSpan="12">
					<nz-select formControlName="location_Type">
						<nz-option [nzValue]="item.value" [nzLabel]="item.name"
							*ngFor="let item of locationTypeOptions"></nz-option>
					</nz-select>

				</nz-form-control>
			</nz-form-item>
		</div>
		<div nz-col class="gutter-row" nzSpan="6">
			<nz-form-item nz-col nzSpan="24" style="width:100%">
				<nz-form-label nz-col nzSpan="12">{{'TrafficManagement.IncidentRecord.Location_Sub_Type' | translate}}
				</nz-form-label>
				<nz-form-control nz-col nzSpan="12">
					<nz-select formControlName="location_SubType">
						<nz-option [nzValue]="item.value" [nzLabel]="item.name"
							*ngFor="let item of locationSubTypeOptions"></nz-option>
					</nz-select>
				</nz-form-control>
			</nz-form-item>
		</div>
		<div nz-col class="gutter-row" nzSpan="6">
			<nz-form-item nz-col nzSpan="24" style="width:100%">
				<nz-form-label nzRequired nz-col nzSpan="13">Direction</nz-form-label>
				<nz-form-control nz-col nzSpan="11">
						<nz-select formControlName="direction">
							<nz-option [nzValue]="item.value" [nzLabel]="item.label"
								*ngFor="let item of Direction"></nz-option>
						</nz-select>
				</nz-form-control>
			</nz-form-item>
		</div>
	</div>
	<div nz-row nzGutter="16">
		<div nz-col class="gutter-row" nzSpan="6">
			<nz-form-item nz-col nzSpan="24" style="width:100%;display: flex;align-items: center">
				<nz-form-label nz-col nzRequired nzSpan="12">
					{{'TrafficManagement.IncidentRecord.Start_Point' | translate}}</nz-form-label>
				<nz-form-control nz-col nzSpan="10">
					<input nz-input formControlName="startCoor" />
				</nz-form-control>
				<span nz-col nzSpan="2">
					<i class="iconfont icon-dingwei" [ngStyle]="{'color':clickBtn==='startCoor'?'#238ce6':''}"
						(click)="getGisPosition('startCoor')"></i>
				</span>
			</nz-form-item>
		</div>
		<div nz-col class="gutter-row" nzSpan="6">
			<nz-form-item nz-col nzSpan="24" style="width:100%;display: flex;align-items: center">
				<nz-form-label nz-col nzRequired nzSpan="12">{{'TrafficManagement.IncidentRecord.End_Point' | translate}}
				</nz-form-label>
				<nz-form-control nz-col nzSpan="10">
					<input nz-input formControlName="endCoor" />
				</nz-form-control>
				<span nz-col nzSpan="2">
					<i class="iconfont icon-dingwei" [ngStyle]="{'color':clickBtn==='endCoor'?'#238ce6':''}"
						(click)="getGisPosition('endCoor')"></i>
				</span>
			</nz-form-item>
		</div>
		<div nz-col class="gutter-row" nzSpan="6">
			<nz-form-item nz-col nzSpan="24" style="width:100%;display: flex;align-items: center">
				<nz-form-label nzRequired nz-col nzSpan="12">{{'TrafficManagement.IncidentRecord.Q_End_Point' | translate}}
				</nz-form-label>
				<nz-form-control nz-col nzSpan="10">
					<input nz-input formControlName="QendCoor" />
				</nz-form-control>
				<span nz-col nzSpan="2">
					<i class="iconfont icon-dingwei" [ngStyle]="{'color':clickBtn==='QendCoor'?'#238ce6':''}"
						(click)="getGisPosition('QendCoor')"></i>
				</span>
			</nz-form-item>
		</div>
		<div nz-col class="gutter-row" nzSpan="6">
			<nz-form-item nz-col nzSpan="24" style="width:100%">
				<nz-form-label nz-col nzRequired nzSpan="13">{{'TrafficManagement.IncidentRecord.Q_End_Link_ID' | translate}}
				</nz-form-label>
				<nz-form-control nz-col nzSpan="11">
					<input nz-input formControlName="q_End_Link_ID" />
				</nz-form-control>
			</nz-form-item>
		</div>
	</div>
	<div nz-row nzGutter="16">
		<div nz-col class="gutter-row" nzSpan="6">
			<nz-form-item nz-col nzSpan="24" style="width:100%">
				<nz-form-label nz-col nzRequired nzSpan="9">
					{{'TrafficManagement.IncidentRecord.Incident_Time' | translate}}</nz-form-label>
				<nz-form-control nz-col nzSpan="15">
					<nz-range-picker formControlName="QTimeRange" [nzDisabledDate]="disabledDate" ></nz-range-picker>
				</nz-form-control>
			</nz-form-item>
		</div>
		<div nz-col class="gutter-row" nzSpan="6">
			<nz-form-item nz-col nzSpan="24" style="width:100%">
				<nz-form-label nz-col nzRequired nzSpan="9">{{'TrafficManagement.IncidentRecord.Q_Time' | translate}}
				</nz-form-label>
				<nz-form-control nz-col nzSpan="15">
					<nz-range-picker formControlName="QTimeRange" [nzDisabledDate]="disabledDate" ></nz-range-picker>
				</nz-form-control>
			</nz-form-item>
		</div>
		<div nz-col class="gutter-row" nzSpan="12">
			<div nz-row nzGutter="16">
				<div nz-col nzSpan="12">
					<nz-form-item nz-col nzSpan="12" style="width:100%">
						<nz-form-label nz-col nzRequired nzSpan="12">
							{{'TrafficManagement.IncidentRecord.Lane_Blockage' | translate}}</nz-form-label>
						<nz-form-control nz-col nzSpan="12">
							<div>
								<nz-dropdown [nzTrigger]="'click'"
									*ngFor="let option of laneBlockagesList;let laneIndex = index">
									<a nz-dropdown>
										<img class="img-lane"
											[src]="'../content/images/icons/' + LANE_BLOCKAGES[option]"
											style="width: 20px;">
									</a>
									<ul nz-menu>
										<li nz-menu-item *ngFor="let option of LANE_BLOCKAGES;let seIndex = index"
											(click)='editLaneBlockages(laneIndex,seIndex)'>
											<img class="img-lane" [src]="'../content/images/icons/'+ option"
												style="width: 20px;">
										</li>
										<li nz-menu-item (click)='editLaneBlockages(laneIndex,2)'>
											Del
										</li>
									</ul>
								</nz-dropdown>
								<nz-dropdown [nzTrigger]="'click'">
									<a nz-dropdown><i class="iconfont icon-add"></i></a>
									<ul nz-menu>
										<li nz-menu-item *ngFor="let option of LANE_BLOCKAGES;let idx = index"
											(click)='addLaneBlockages(idx)'>
											<img class="img-lane" [src]="'../content/images/icons/'+ option"
												style="width: 20px;">
										</li>
									</ul>
								</nz-dropdown>
							</div>
						</nz-form-control>
					</nz-form-item>
				</div>
				<div nz-col nzSpan="12" class="Expected_Time_To_Clear">
					<nz-form-item nz-col nzSpan="12" style="width:100%">
						<nz-form-label nz-col nzRequired nzSpan="13">
							{{'TrafficManagement.IncidentRecord.Expected_Time_To_Clear' | translate}}</nz-form-label>
						<nz-form-control nz-col nzSpan="11">
							<nz-date-picker nzFormat="yyyy-MM-dd HH:mm:ss" [nzShowTime]="{ nzFormat: 'HH:mm:ss' }"
								formControlName="eTime"></nz-date-picker>
						</nz-form-control>
					</nz-form-item>
				</div>
			</div>
		</div>
	</div>
	<div nz-row nzGutter="16" style="padding-top: 0.2rem;">

		<div nz-col class="gutter-row" nzSpan="12">
			<nz-form-item nz-col nzSpan="24" style="width: 100%;">
				<nz-form-label nz-col nzSpan="6">{{'TrafficManagement.IncidentRecord.Remark' | translate}}
				</nz-form-label>
				<div nz-col nzSpan="18">
					<textarea nz-input placeholder="" [nzAutosize]="{ minRows: 1, maxRows: 1 }"
						formControlName="remark"></textarea>
				</div>
			</nz-form-item>
		</div>
	</div>
	<div nz-row nzGutter="16">
		<div nz-row nzGutter="16">
			<div class="buttonSet" nz-row>
				<div nz-col nzSpan="2">
					<button nz-button nzType="default" nzBlock (click)="submitForm()"
						type="button">{{'TrafficManagement.IncidentRecord.Save' | translate}}
					</button>
				</div>
				<div nz-col nzSpan="2" >
					<button nz-button nzType="default" nzBlock (click)="cancelEditFunc()"
						type="button">{{'TrafficManagement.IncidentRecord.Cancel' | translate}}
					</button>
				</div>
			</div>
		</div>
	</div>
</form>
<nz-modal [(nzVisible)]="isForceVisible" nzTitle="{{'TrafficManagement.IncidentRecord.Cross region operation' | translate}}" (nzOnCancel)="FourchHandleCancel()" (nzOnOk)="ForceHandleOk()">
		<div>
			{{'TrafficManagement.IncidentRecord.Further operation, mandatory operation still available' | translate}}
		</div>
</nz-modal>